<template>
    <el-popover placement="bottom" :width="300" trigger="click" popper-class="notification-popper">
        <template #default>
            <slot></slot>
        </template>
        <template #reference>
            <el-badge :value="value" :max="max" :is-dot="isDot">
                <component :is="`el-icon-${toLine(icon)}`"></component>
            </el-badge>
        </template>
    </el-popover>
</template>

<script lang="ts" setup>
import { toLine } from '../../../utils'
let props = defineProps({
    // 显示的图标
    icon: {
        type: String,
        default: 'Bell'
    },
    // 通知的数量
    value: {
        type: [Number, String],
        default: ''
    },
    // 最大值
    max: {
        type: Number
    },
    // 是否显示小圆点
    isDot: {
        type: Boolean,
        default: false
    },

})
</script>

<style lang="scss" scoped>

svg {
  width: 1em;
  height: 1em;
}
</style>